<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>问答详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__dropload.css" />

    <style>
        body {
            padding-bottom:70px;
        }
        .list_content {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:1rem 0.75rem 0rem 0.75rem;
            margin-bottom:0.5rem;
            margin-top:0.5rem;
        }
        .tit_top {
            width: 100%;
            color: #4D4D4D;
            font-size: 0.75rem;
            line-height: 1.05rem;
            font-weight: bold;
            margin-bottom:0.5rem;
        }
        .tit_content {
            width: 100%;
            color: #666;
            font-size: 0.7rem;
            line-height: 1rem;
            height: auto;
            padding-top:0.75rem;
            padding-bottom: 0.75rem;
            word-break: break-all;
            word-wrap:break-word;
        }

        .time{
            padding-left:0.6rem;
        }
        .intro{
            color: #999999;
            font-size: 0.7rem;
            padding-bottom:0.9rem;
        }
        .comment {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:0 0.75rem;
        }
        .number{
            padding-top:1.025rem;
            padding-bottom:0.35rem;
            color: #333;
            font-size: 0.7rem;
        }
        .comment_one{
            padding-top:0.525rem;
            padding-bottom:0.525rem;
        }
        .avatar{
            width: 1.75rem;
            height: 1.75rem;
            margin-right:0.75rem;
        }
        .avatar img{
            width: 100%;
            height: 100%;
        }
        .name{
            height: 1.75rem;
            line-height: 1.75rem;
            color: #333;
            font-size: 13px;
        }
        .delete{
            width: 0.85rem;
            height: 0.85rem;
            margin-top:0.45rem;
        }
        .talk_xq{
            color: #333;
            font-size: 14px;
            padding-top:0.325rem;
            padding-bottom:0.5rem;
            word-break: break-all;
            word-wrap: break-word;
            /*line-height:1rem;*/
        }

        .time1{
            color: #B3B3B3;
            font-size: 12px;
        }
        .zan{
            width: 0.85rem;
            height: 0.85rem;
            display: inline-block;
            background: url('__IMG__zan@3x.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .zan1{
            width: 0.85rem;
            height: 0.85rem;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .button{
            position:fixed;
            left:0;
            bottom:0;
            width:100%;
            height: 3.5rem;
            background-color: #FFFFFF;
            z-index: 998;
            padding-left:0.75rem;
            padding-right:0.75rem;
        }
        .btn{
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            background-color: #E73C5C;
            color: #FFFFFF;
            font-size: 16px;
            border-radius:5px;
            font-weight:bold;
            margin-top:0.5rem;
        }


        .comment_imgs,.comment_imgs1,.comment_imgs2{
            margin-bottom: 0.5rem;
        }
        .comment_imgs0{
            padding-bottom: 0.75rem;
        }

        .comment_imgs img,  .comment_imgs1 img ,  .comment_imgs2 img  {
            float: left;
            width: 86px;
            height: 86px;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
        }
        .comment_imgs0 img{
            float: left;
            width: 32%;
            height: 100px;
            margin-right: 1%;
            border-radius: 0.25rem;
        }
        .comment_imgs2 img{
            width: 8.5rem;
            height: 8.5rem;
        }

        .comment_imgs img:last-child,.comment_imgs1 img:last-child,.comment_imgs0 img:last-child {
            float: left;
            margin-right: 0;
        }

        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__dian@3x.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }
        .zhezhao{
            display: none;
            background-color: rgba(0,0,0,0.3);width: 100%;
            height: 100%;z-index: 999;
            position: fixed;left: 0;
            top: 0;
        }
        .operation{
            z-index: 9999;
            display: none;
            background-color: #FFFFFF;
            position: absolute;
            right:0;
            top:2.4rem;
            width:100px;
        }
        .operation div{
            height:40px ;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #757575;
        }
    </style>
</head>
<body>
<div class="zhezhao" onclick="cancelopretion()">

</div>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;z-index: 9995" id="header">
    <input type="hidden" name="id" value="{$id}">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">问答详情</div>
    {if $list['is_delete'] == 1}
    <a class="aui-pull-right" style="position: relative;">
        <span class="aui-iconfont aui-icon-rightu" tapmode="active" onclick="right()"></span>
        <div class="operation">
            <div style="border-bottom: 1px solid #f5f5f5;" onclick="bianji(this);" idd="{$list.interlocution_id}">
                编辑
            </div>
            <div  onclick="shanchu(this);" idd="{$list.interlocution_id}">
                删除
            </div>

        </div>
    </a>
    {/if}
</header>
<div class="list_content">
    <div class="underLine1">
        <div class="tit_top aui-ellipsis-2">
            {$list.interlocution_title}
        </div>
        <div class="intro">
            {$list.user_username}<span class="time">{$list.interlocution_time}</span>
        </div>
    </div>

    <div class="tit_content">
       {$list.interlocution_introduce}
    </div>
    <div class="comment_imgs0 after">
        {volist name="list['img']" id="vo"}
        <img src="{$vo}" alt="">
        {/volist}
    </div>
</div>

<div class="comment">
    <div class="number">回答({$list.interlocution_num})</div>
       <div class="upOrDown">
        <div class="upOrDown_data">
            {if count($list['children'])>0}
            {volist name="list['children']" id="vv"}
              <div class="flex-wrap comment_one">
                <div class="avatar">
                    <img  src="{$vv.user_image}" />
                </div>
                <div class="flex-con talk">
                    <div class="name flex-wrap">
                        <div class="flex-con aui-ellipsis-1">{$vv.username}</div>
                        {if $uid == $vv['user_id']}
                        <div class="delete" onclick="deleteAnswer(this)" idd="{$vv.answer_id}">
                            <img  src="__IMG__del@3x.png" />
                        </div>
                        {/if}
                    </div>
                    <div class="talk_xq">
                        {$vv.answer_content}
                    </div>
                    <!-- 三张图 -->
                    <div class="comment_imgs after">
                        {volist name="vv['answer_img']" id="vk"}
                        <img src="{$vk}" alt="">
                        {/volist}
                    </div>
                    <div class="flex-wrap">
                        <div class="flex-con time1">{$vv.answer_time}</div>
                        {if $vv['dz']==1}
                        <div class="zan1" onclick="fnZan1(this)" idd="{$vv.answer_id}" id="id_{$vv.answer_id}"></div>
                        {else  /}
                        <div class="zan" onclick="fnZan1(this)" idd="{$vv.answer_id}" id="id_{$vv.answer_id}"> </div>
                        {/if}
                    </div>
                </div>
            </div>
            {/volist}
            {/if}
       </div>
    </div>
</div>
<div class="button topLine" id="foot" onclick="answer(this)" idd="{$list.interlocution_id}"tapmode>
    <div class="btn">我来回答</div>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__dropload.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>


<script type="text/javascript">
    //点赞
    function fnZan1(el) {
        var idd=$api.attr(el,'idd');

        $.ajax({
            url:'{:url("First/dz")}',
            data:{'answer_id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                if(data.status==200){
                    if ($api.hasCls($api.byId('id_' + idd), 'zan1')) {
                        $api.removeCls($api.byId('id_' + idd), 'zan1');
                        $api.addCls($api.byId('id_' + idd), 'zan');
                        return;
                    } else {

                        $api.removeCls($api.byId('id_' + idd), 'zan');
                        $api.addCls($api.byId('id_' + idd), 'zan1');
                        return;

                    }
                }
            }
        })
    }

    function deleteAnswer(el) {
        var idd=$api.attr(el,'idd');
        $.ajax({
            url:'{:url("First/deletadz")}',
            data:{'answer_id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                if(data.status==200){
                    window.location.reload();
                }
            }

        })
    }
    // 打开编辑和删除和遮罩层
    var zhezhaoindex=0;
    function right() {
        if (zhezhaoindex==0) {
            $('.zhezhao').show();
            $('.operation').show();
            zhezhaoindex=1;
        }else {
            $('.zhezhao').hide();
            $('.operation').hide();
            zhezhaoindex=0;
        }

    }
    //    取消遮罩层和操作弹窗
    function cancelopretion() {
        $('.zhezhao').hide();
        $('.operation').hide();
        zhezhaoindex=0;
    }
    //   进入编辑页面
    function bianji(el) {
        var idd=$api.attr(el,'idd');
        location.href='{:url("First/answerupdate")}?answer_id='+idd;
    }
    //   删除
    function shanchu(el) {
        var idd=$api.attr(el,'idd');
        $.ajax({
            url:'{:url("First/deletaanswer")}',
            data:{'id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                if(data.status==200){
                   location.href='{:url("First/answer")}';
                }
            }

        })
    }
    //我要回答
    function answer(el) {
        var idd=$api.attr(el,'idd');
        location.href = '{:url("First/question")}?id='+idd;

    }
</script>
<script>
    var page = 1;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
        loadDownFn : function(me){
            var id = $('input[name="id"]').val();
            page++;
            $.ajax({
                url:'{:url("First/ajaxanswerdetail")}',
                data:'page='+page+'&id='+id,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){
                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var _html='';
                            _html +='<div class="flex-wrap comment_one">';
                            _html += '<div class="avatar">';
                            _html += '<img  src="'+v.user_image+'" />';
                            _html +='</div>';
                            _html += '<div class="flex-con talk">';
                            _html += '<div class="name flex-wrap">';
                            _html += '<div class="flex-con aui-ellipsis-1">'+v.username+'</div>';
                            if(v.delete == 1){
                                _html +='<div class="delete deleteAnswer" id="'+v.answer_id+'">';
                                _html += '<img  src="__IMG__del@3x.png" />';
                                _html +=  '</div>';
                            }


                            _html +='</div>';
                            _html +='<div class="talk_xq">'+v.answer_content+'</div>';
                            _html += '<div class="comment_imgs after">';
                            $.each(v.answer_img,function (kk,vv) {
                            _html +='<img src="'+vv+'" alt="">';
                            })
                            _html +='</div>';
                            _html +='<div class="flex-wrap">';
                            _html +='<div class="flex-con time1">'+v.answer_time+'</div>';
                            if(v.dz==1){
                                _html +='<div class="zan1"  onclick="fnZan1(this)" idd="'+v.answer_id+'" id="id_'+v.answer_id+'"></div>';
                            }else{
                                _html +='<div class="zan"   onclick="fnZan1(this)" idd="'+v.answer_id+'" id="id_'+v.answer_id+'"> </div>';
                            }
                           _html +='</div> </div> </div>';
                            $(".upOrDown_data").append(_html);

                        });
//                        $('.upOrDown_data').append(data);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }
                    $('.deleteAnswer').click(function () {
                        var id = $(this).attr('id');
                        $.ajax({
                            url:'{:url("First/dz")}',
                            data:{'answer_id':id},//
                            type:'POST',
                            dataType:'json',
                            success:function (data) {
                                if(data.status==200){
                                    window.location.reload();
                                }
                            }

                        })
                    });

                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            var id = $('input[name="id"]').val();

            page = 1;
            $.ajax({
                url:'{:url("First/ajaxanswerdetail")}',
                data:'page='+page+'&id='+id,
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var _html='';
                        _html +='<div class="flex-wrap comment_one">';
                        _html += '<div class="avatar">';
                        _html += '<img  src="'+v.user_image+'" />';
                        _html +='</div>';
                        _html += '<div class="flex-con talk">';
                        _html += '<div class="name flex-wrap">';
                        _html += '<div class="flex-con aui-ellipsis-1">'+v.username+'</div>';
                        if(datas.user_id == v.user_id){
                            _html +='<div class="delete deleteAnswer" id="'+v.answer_id+'">';
                            _html += '<img  src="__IMG__del@3x.png" />';
                            _html +=  '</div>';
                        }


                        _html +='</div>';
                        _html +='<div class="talk_xq">'+v.answer_content+'</div>';
                        _html += '<div class="comment_imgs after">';
                        $.each(v.answer_img,function (kk,vv) {
                            _html +='<img src="'+vv+'" alt="">';
                        })
                        _html +='</div>';
                        _html +='<div class="flex-wrap">';
                        _html +='<div class="flex-con time1">'+v.answer_time+'</div>';
                        if(v.dz==1){
                            _html +='<div class="zan1"  onclick="fnZan1(this)" idd="'+v.answer_id+'" id="id_'+v.answer_id+'"></div>';
                        }else{
                            _html +='<div class="zan"   onclick="fnZan1(this)" idd="'+v.answer_id+'" id="id_'+v.answer_id+'"> </div>';
                        }
                        _html +='</div> </div> </div>';
                        $(".upOrDown_data").append(_html);
                    });
                    me.resetload();
                    me.unlock();
                    me.noData(false);

                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });

</script>
</html>
